@charset "utf-8";
@import "reset1";
@import "animation";
@function w($p){
    @return $p/640*100%;
}
@function h($p){
    @return $p/1136*100%;
}
html,body{
    height: 100%;
}
.musicPlay{
    -webkit-animation: animal 1s infinite linear ;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;

}
.musicBtn{
    width: 26px;
    height: 26px;
    position: fixed;
    right: w(29);
    top: h(19);
    z-index: 20;
    img{
        width: 100%;
        height: 100%;
    }    
}
.web{
    width: 100vw;
    height: 100vh;
    background: #ffbc3b;
    background-size: 100% 100%;
    position: relative;
    display: none;
    .indexBg{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        img{
            width: 100%;
        }
    }
    .logo{
        width: w(171);
        position: absolute;
        left: w(32);
        top: h(130);
        img{
            width: 100%;
        }
    }
    .menu{
        width: w(200);
        height: h(297);
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        left: w(21);
        top: h(662);
        .start{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .winners{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .gameRule{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
    .gameContent{
        width: w(580);
        height: h(739);
        background: url(../img/gameRule.png);
        background-size: 100% 100%;
        transform: scale(0);
        transition: all 1s;
        position: absolute;
        left: w(23);
        top: h(232);
        z-index: 6;
        .ruleClose{
            width: w(52);
            position: absolute;
            left: 88%;
            top: 4%;
            img{
                width: 100%;
            }
        }
        .lookRank{
            width: w(45);
            position: absolute;
            left: 88%;
            top: 58%;
            img{
                width: 100%;
            }
        }
        .go{
            width: w(56);
            position: absolute;
            left: 88%;
            top: 80%;
            img{
                width: 100%;
            }
        }
        .ruleContent{
            width: 67%;
            height: 81.1%;
            margin-left: 12%;
            margin-top: 15.6%;
            overflow: auto;
            img{
                width: 100%;
            }
        }
    }
}
.gameRank{
        width: w(580);
        height: h(739);
        background: url(../img/gameRank.png);
        background-size: 100% 100%;
        transform: scale(0);
        transition: all 1s;
        position: absolute;
        left: w(23);
        top: h(232);
        z-index: 11;
        .rankClose{
            width: w(52);
            position: absolute;
            left: 88%;
            top: 4%;
            img{
                width: 100%;
            }
        }
        .one{
            width: w(66);
            position: absolute;
            right: 3.4%;
            top: 21.9%;
            img{
                width: 100%;
            }
        }
        .two{
            width: w(75);
            position: absolute;
            right: 3.4%;
            top: 41.5%;
            img{
                width: 100%;
            }
        }
        .three{
            width: w(68);
            position: absolute;
            right: 3.4%;
            top: 60.8%;
            img{
                width: 100%;
            }
        }
        .four{
            width: w(68);
            position: absolute;
            right: 3.4%;
            top: 79.9%;
            img{
                width: 100%;
            }
        }
        ul{
            width: 67%;
            height: 81.1%;
            margin-left: 12%;
            margin-top: 16%;
            overflow: auto;
            li{
                width: 100%;
                padding-top: 5px;
                display: flex;
                justify-content: space-between;
                span{
                    font-size: 16px;
                    color: #795949;
                }
                img{
                    width: 20%;
                    vertical-align: middle;
                }
                
            }
        }
    }
.shareWeb{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12;
    transform: translateX(-100%);
    transition: 0.6s;
    img{
        width: 100%;
        height: 100%;
    }
    .backBtn{
        width: 30px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        color: #FF6666;
        font-family: "微软雅黑";
        cursor: pointer;
        position: absolute;
        left: 10px;
        top: 10px;
    }
}
.gameWeb{
    height: 100%;
    background: #ffbc3b;
    overflow: auto;
    font-size: 0;
    display: none;
    .scoreBan{
        width: w(245);
        height: h(101);
        background: url(../img/scoreBan.png);
        background-size: 100% 100%;
        position: absolute;
        left: w(43);
        top: h(28);
        z-index: 1;
        text-align: right;
        span{
            display: inline-block;
            font-size: 30px;
            color: #795949;
            margin-top: 5%;
            margin-right: 5px;
        }
    }
    .life{
        width: w(200);
        position: absolute;
        right: w(10);
        top: h(46);
        z-index: 1;
        .heart{
            display: inline-block;
            width: 30%;
            img{
                width: 100%;
            }
        }
    }
    .bgBox{
            height: 100%;
            font-size: 0;
            display: flex;
            position: absolute;
            left: 0;
            z-index: 0;
        .gameBg{
            height: 100%;
            img{
                height: 100%;
            }
        }
    }
    .cloudBox{
        height: h(396);
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        .cloud{
            height: 100%;
            img{
                height: 100%;
            }
        }
    }
    .gameCloud1{
        z-index: 2;
    }
    .gameCloud2{
        z-index: 3;
    }
    .startR{
        width: w(120);
        height: h(173);
        overflow: hidden;
        position: absolute;
        top: h(643);
        left: w(57);
        z-index: 4;
        img{
            width: 800%;
            height: 100%;
            position: absolute;
            left: 0;
        }
    }
    .pigRun{
        -webkit-animation: run 0.5s infinite step-start;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }
    .bridge1{
        width: w(779);
        position: absolute;
        left: w(48);
        top: h(810);
        img{
            width: 100%;
        }
    }
    .bridge2{
        width: w(613);
        position: absolute;
        left: 100vw;
        top: h(810);
        .gang{
            width: 100%;
        }
        .gift{
            display: inline-block;
            width: w(151);
            position: absolute;
        }
       .gift:nth-of-type(2){
            left: 1%;
           top: -400%;
        }
         .gift:nth-of-type(3){
            left: 40%;
            top: -900%;
        }
         .gift:nth-of-type(4){
            left: 60%;
            top: -600%;
        }
        .stone{
            width: w(52);
            position: absolute;
            top: -100%;
        }
    }
    .bridge3{
        width: w(613);
        position: absolute;
        left: 100vw;
        top: h(810);
        .gang{
            width: 100%;
        }
        .stone{
            width: w(52);
            position: absolute;
            top: -100%;
        }
        .gift{
            display: inline-block;
            width: w(151);
            position: absolute;
        }
        .gift:nth-of-type(2){
            left: 1%;
           top: -500%;
        }
         .gift:nth-of-type(3){
            left: 40%;
            top: -900%;
        }
         .gift:nth-of-type(4){
            left: 60%;
            top: -700%;
        }
    }
}
.overWeb{
    display: none;
    background: rgba(0,0,0,.7);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    .star{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .header{
        width: 100%;
        position: absolute;
        top: h(106);
        img{
            width: 100%;
        }
    }
    .gameOver{
        width: w(430);
        height: h(330);
        background: url(../img/gainScore.png);
        background-size: 100% 100%;
        position: absolute;
        left: w(113);
        top: h(267);
        .fenshu{
            position: absolute;
            left: 36%;
            top: 42%;
            color: #e32424;
            font-size: 38px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
    }
    .overBtn{
            width: w(478);
            position: absolute;
            left: w(105);
            top: h(650);
            display: flex;
            justify-content: space-between;
            .againGame{
                width: 24.2%;
                img{
                    width: 100%;
                }
            }
            .overRank{
                width: 24.2%;
                img{
                    width: 100%;
                }
            }
            .overShare{
                width: 38.2%;
                img{
                    width: 100%;
                }
            }
        }
    .sign{
            width: w(525);
            position: absolute;
            left: w(70);
            top: h(880);
            img{
                width: 100%;
            }
        }
}
.loading{
    width: 100%;
    height: 100%;
    background: url(../img/loadingBg.png);
    background-size: 100% 100%;
    position: relative;
//  display: none;
    
    p{
        position: absolute;
        left: w(247);
        top: h(616);
        color: #fcf0d8;
        font-size: 36px;
        text-align: center;
    }
}
@media screen and (min-height:800px){
    .web{
        .indexBg{
            width: 100%;
            position: absolute;
            left: 0;
            top: 7%;
            img{
                width: 100%;
            }
        }
    }
    .gameWeb{
        .startR{
            width: w(120);
            height: h(150);
            overflow: hidden;
            position: absolute;
            top: h(643);
            left: w(57);
            z-index: 4;
            img{
                width: 800%;
                height: 100%;
                position: absolute;
                left: -600%;
            }
        }
        .bridge1{
            width: w(779);
            position: absolute;
            left: w(48);
            top: h(800);
            img{
                width: 100%;
            }
        }
        .bridge2{
            width: w(613);
            position: absolute;
            left: 100vw;
            top: h(810);
            img{
                width: 100%;
            }
        }
        .bridge3{
            width: w(613);
            position: absolute;
            left: 100vw;
            top: h(810);
            img{
                width: 100%;
            }
        }
    }
    
}
